<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志表</title>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item" style="padding-top: 10px;">
                <div class="layui-input-group">
                    <div class="layui-input-prefix">用户名</div>
                    <input type="text" lay-affix="clear" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    <div class="layui-input-prefix">请求地址</div>
                    <input type="text" lay-affix="clear" name="url" placeholder="请输入请求地址" autocomplete="off" class="layui-input">
                    <div class="layui-input-suffix">
                        <button type="button" class="layui-btn" lay-submit lay-filter="log-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="logs-table"></table>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'jquery'], function () {
        const table = layui.table;
        const $ = layui.jquery;
        const form = layui.form;

        const logs_columns = () => [[
            {field: 'id', title: 'ID', width: 80, sort: true}
            , {field: 'method', title: '请求方法'}
            , {field: 'username', title: '用户'}
            , {field: 'url', title: '请求URL'}
            , {field: 'desc', title: '请求参数'}
            , {field: 'ip', title: 'IP地址'}
            , {field: 'success', title: '请求状态'}
            , {field: 'user_agent', title: '请求系统信息'}
            , {field: 'ca_time', title: '请求时间'}
        ]];

        table.render({
            elem: '#logs-table',
            cols: logs_columns(),
            parseData: parserTableData,
            url:'/api/logs',
            skin: 'line', // 表格风格
            even: true,
            page: true, // 是否显示分页
            height: 'full-248',
            limit:20,
            limits:[20,40,60,80,100],
            text: {none: '暂无数据'},
        });

        form.on('submit(log-query)', function(data) {
            table.reload('logs-table', {where: data.field});
            return false;
        });
});
</script>
</html>